<template>
	<view class="container">
		<!-- 顶部筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item">推荐</view>
			<picker class="filter-item" :range="areas" :value="areaIndex" @change="onAreaChange">
				<view>{{ areas[areaIndex] }}</view>
			</picker>
			<picker class="filter-item" :range="jobsType" :value="jobIndex" @change="onJobTypeChange">
				<view>{{ jobsType[jobIndex] }}</view>
			</picker>
			<input class="search-input" placeholder="请输入关键词" />
		</view>
		<!-- 招工列表（全部） -->
		<view class="job-list">
			<view class="job-item" v-for="item in jobs" :key="item.id" @click="goJobDetail(item.id)">
				<view class="job-title">{{ item.title }}</view>
				<view class="job-tags">
					<text class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</text>
				</view>
				<view class="job-info">
					<text>{{ item.location }}</text>
					<text>· 距离：{{ item.distance }}</text>
				</view>
				<view class="job-time">截止时间：{{ item.deadline }}</view>
				<view class="job-bottom">
					<view class="job-meta">
						<text class="cert" v-if="item.cert">企业认证</text>
						<text class="real" v-if="item.real">已实名</text>
						<text class="views">共{{ item.views }}个浏览</text>
					</view>
					<button class="call-btn">致电</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const areas = ['西青区', '南开区', '河西区'];
const jobsType = ['装卸工', '销售经理', '普工', '搬运工'];
const areaIndex = ref(0);
const jobIndex = ref(0);
function onAreaChange(e) {
	areaIndex.value = e.detail.value;
}
function onJobTypeChange(e) {
	jobIndex.value = e.detail.value;
}
function goJobDetail(id) {
	uni.navigateTo({ url: `/src/pages/jobDetail/jobDetail?id=${id}` });
}
// 招工数据表（10条）
const jobs = [
	{ id: 1, title: '天津河西区装卸队招装卸工，白班日结350-500，管吃管住', tags: ['操作工', '普工', '180/天'], location: '天津市农学院南行200米', distance: '5km', deadline: '2024-12-12 24:00', cert: true, real: true, views: 238 },
	{ id: 2, title: '销售经理1名，能吃苦耐劳，管吃管住', tags: ['销售', '普工', '200/天'], location: '天津市南开区', distance: '3km', deadline: '2024-12-15 18:00', cert: true, real: false, views: 120 },
	{ id: 3, title: '天津滨海新区招普工，包吃住', tags: ['普工', '包吃住', '150/天'], location: '滨海新区工业园', distance: '8km', deadline: '2024-12-20 20:00', cert: false, real: true, views: 98 },
	{ id: 4, title: '河东区招操作工，月结', tags: ['操作工', '月结', '5000/月'], location: '河东区', distance: '2km', deadline: '2024-12-30 12:00', cert: true, real: true, views: 56 },
	{ id: 5, title: '塘沽招装卸工，日结', tags: ['装卸工', '日结', '220/天'], location: '塘沽区', distance: '12km', deadline: '2024-12-25 17:00', cert: false, real: false, views: 77 },
	{ id: 6, title: '西青区招普工', tags: ['普工', '180/天'], location: '西青区', distance: '6km', deadline: '2024-12-18 19:00', cert: true, real: true, views: 201 },
	{ id: 7, title: '南开区招销售', tags: ['销售', '提成', '3000+'], location: '南开区', distance: '4km', deadline: '2024-12-22 10:00', cert: false, real: true, views: 65 },
	{ id: 8, title: '河西区招搬运工', tags: ['搬运工', '180/天'], location: '河西区', distance: '5km', deadline: '2024-12-28 16:00', cert: true, real: false, views: 89 },
	{ id: 9, title: '塘沽招普工', tags: ['普工', '包吃住', '160/天'], location: '塘沽区', distance: '13km', deadline: '2024-12-29 15:00', cert: false, real: true, views: 44 },
	{ id: 10, title: '东丽区招装卸工', tags: ['装卸工', '180/天'], location: '东丽区', distance: '7km', deadline: '2024-12-27 14:00', cert: true, real: false, views: 33 }
];
</script>

<style scoped>
.container {
	padding: 16rpx;
}

.filter-bar {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.filter-item {
	flex: 1;
	text-align: center;
}

.search-input {
	flex: 2;
	border: 1px solid #eee;
	border-radius: 8rpx;
	padding: 8rpx;
	margin-left: 8rpx;
}

.job-list {
	background: #f6f6f6;
}

.job-item {
	background: #fff;
	margin-bottom: 12rpx;
	padding: 12rpx;
	border-radius: 8rpx;
}

.job-title {
	font-weight: bold;
	font-size: 30rpx;
	margin-bottom: 8rpx;
}

.job-tags {
	margin-bottom: 8rpx;
}

.tag {
	background: #f0f0f0;
	color: #007aff;
	border-radius: 6rpx;
	padding: 2rpx 10rpx;
	margin-right: 8rpx;
	font-size: 22rpx;
}

.tag.blue {
	background: #e6f7ff;
	color: #1890ff;
}

.job-info {
	color: #888;
	font-size: 22rpx;
	margin-bottom: 4rpx;
}

.job-time {
	color: #faad14;
	font-size: 22rpx;
	margin-bottom: 8rpx;
}

.job-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.job-meta {
	display: flex;
	align-items: center;
}

.cert,
.real,
.views {
	color: #1890ff;
	font-size: 22rpx;
	margin-right: 12rpx;
}

.call-btn {
	background: #1890ff;
	color: #fff;
	border: none;
	border-radius: 8rpx;
	padding: 6rpx 18rpx;
	font-size: 24rpx;
	margin-left: 12rpx;
	position: absolute;
	right: 0;
	bottom: 5rpx;
}
</style>
